<template>
	<div>
		<div style="display: flex;flex-wrap: wrap;">

			<div v-for="(item,index) in getList">
				<div class="model">
					<div style="display: flex;justify-content:center;height: 100%;align-items: center;width:100px;">
						<div class="icon">
							<el-icon color="#FFFFFF" @click.stop="handleRemove(index)">
								<Delete />
							</el-icon>
							<el-icon color="#FFFFFF" @click.stop="preview(index)">
								<Plus />
							</el-icon>
						</div>
					</div>
				</div>
				<el-image style="width: 100px;height: 100px;margin-right: 5px;" class="avatar-uploader" :src="item"
					:preview-src-list="getList" />

			</div>
			<div>
				<div class="avatar-uploader">
					<el-icon class="el-icon-plus avatar-uploader-icon " @click="show=true">
						<Plus />
					</el-icon>
				</div>
			</div>
		</div>
		<div style="color:#b4b4b4;">{{msg}}</div>
		<!-- <div style="display: flex;">
			<el-input-number v-model="data.source" style="width: 140px;" placeholder="调整序号" />-
			<el-input-number v-model="data.target" style="width: 140px;" placeholder="目标序号" />
			<el-button style="margin-left: 10px;" size="small" type="success" @click="tiao()">调整</el-button>
		</div> -->


		<el-dialog title="图片管理器" :model-value="show" @close="show=false" :destroy-on-close="true" custom-class="dia"
			width="800px" style="margin: 15vh auto;">
			<WMImageManage @onSuccess="success" :multiply="true" />

		</el-dialog>

		<div>

			<el-image-viewer v-if="showA" :hideOnClickModal="false" :url-list="getList" :index="2"
				:initial-index="initialIndex" @close="co()" />
		</div>
	</div>
</template>

<script>
	import {
		ElMessage
	} from 'element-plus'
	import {
		getEnvs
	} from "/@/utils/envs.js"
	import {
		GLOBAL_DATA
	} from '/@/api/constant'

	import {
		reactive,
		toRef,
		ref,
		computed,
		onMounted,
	} from 'vue';
	import {
		Delete,
		Plus
	} from '@element-plus/icons-vue'
	import WMImageManage from '/@/components/from/WMImageManage.vue'
	export default {
		name: 'uploadImages',
		components: {
			Delete,
			Plus,
			WMImageManage
		},

		props: {
			urls: {
				type: Array,
				default: () => {
					return []
				}
			},
			msg: {
				type: String,
				default: ''
			}
		},
		setup(props, ctx) {
			const initialIndex = ref(0)
			const showA = ref(false)
			const show = ref(false)
			const data = reactive({
				source: '',
				target: ''
			})
			const success = (val) => {
				show.value = false
				console.log('订单达')
				val.forEach(item => {
					props.urls.push(item)
				})

				ctx.emit('update:urls', props.urls)

			}
			const swapArr = (arr, index1, index2) => {
				arr[index1] = arr.splice(index2, 1, arr[index1])[0];
				return arr;
			}
			const tiao = () => {
				if (data.source >= 0 && data.target >= 0 && data.source < props.urls.length && data.target < props.urls
					.length) {
					swapArr(props.urls, data.source, data.target)
					//this.$emit('update:urls', this.urls)

				}
			}
			const getBaseUrl = (type) => {
				const {
					envStr
				} = getEnvs()
				console.log("envStr", envStr);
				// const baseUrlStr = envStr === 'dev' ? import.meta.env.VITE_APP_API_BASE_URL : GLOBAL_DATA[envStr]['baseUrl']
				return GLOBAL_DATA[envStr][type]
			}
			const handleRemove = (index) => {

				props.urls.splice(index, 1)
				ctx.emit('update:urls', props.urls)

			}
			let prevOverflow = ""
			const preview = (index) => {
				initialIndex.value = index
				console.log('showA', showA.value)
				prevOverflow = document.body.style.overflow
				document.body.style.overflow = 'hidden'
				showA.value = true
			}


			const co = () => {
				console.log('showA111', showA.value)
				document.body.style.overflow = prevOverflow
				showA.value = false
			}
			const getList = computed(() => {
				let list = props.urls
				let nl = []
				list.forEach(item => {
					nl.push(getBaseUrl('image-url') + item)
				})

				console.log('getList>>>>>>>>>>>>>>>>>>>>>>>>>>>', list);
				return nl
			})
			return {
				success,
				co,
				preview,
				handleRemove,
				getBaseUrl,
				tiao,
				swapArr,
				getList,
				data,
				show,
				showA,
				initialIndex
			}
		}



	}
</script>

<style>
	.avatar-uploader:hover {
		border-color: #409EFF;
	}

	.avatar-uploader {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
	}

	.model {
		background-color: #000000;
		width: 100px;
		height: 100px;
		position: absolute;
		opacity: 0;
		z-index: 1;
	}

	.model:hover {
		opacity: 0.6;
	}
</style>